<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>淘宝</title>
		<link rel="icon" href="./img/tb.ico" />
		<!-- 外部引入css样式 -->
		<link rel="stylesheet" href="./css/index.css" />
		<!-- 引入字体图标库 -->
		<link rel="stylesheet" href="./iconfont/iconfont.css" />
	</head>
	<body>
		<div class='nav'>
			<ul class='nav-left'>
				<li class="nav-relative">
					<a href="">中国大陆</a>
					<span class="iconfont icon-xiajiantou"></span>
					<div class="down-list">
						<ul>
							<li>
								<a href="">全球</a>
							</li>
							<li>
								<a href="">中国大陆</a>
							</li>
							<li>
								<a href="">中国香港</a>
							</li>
							<li>
								<a href="">中国台湾</a>
							</li>
							<li>
								<a href="">中国澳门</a>
							</li>
						</ul>
					</div>
				</li>
				<li>
					<a href="">注册</a>
				</li>
				<li>
					<a href="">网页无障碍</a>
				</li>
				<li>
					<a href="">切换企业版</a>
				</li>
				<li class="nav-relative">
					<a href="">选择主题</a>
					<span class="iconfont icon-xiajiantou"></span>
					<div class="down-list">
						<ul>
							<li>
								<a href="">官方主题</a>
							</li>
							<li>
								<a href="">简约皮肤</a>
							</li>
						</ul>
					</div>
				</li>
			</ul>
			<ul class='nav-right'>
				<li>
					<a href="">已买到的宝贝</a>
				</li>
				<li class="nav-relative">
					<a href="">我的淘宝</a>
					<span class="iconfont icon-xiajiantou"></span>
					<!-- 下拉列表 -->
					<div class="down-list">
						<ul>
							<li>
								<a href="">我的足迹</a>
							</li>
							<li>
								<a href="">我的卡券包</a>
							</li>
						</ul>
					</div>
				</li>
				<li>
					<span class="iconfont icon-gouwuche"></span>
					<a href="">购物车</a>
				</li>
				<li class="nav-relative">
					<span class="iconfont icon-shoucang1"></span>
					<a href="">我的收藏</a>
					<span class="iconfont icon-xiajiantou"></span>
					<div class="down-list">
						<ul>
							<li>
								<a href="">收藏的宝贝</a>
							</li>
							<li>
								<a href="">收藏的店铺</a>
							</li>
						</ul>
					</div>
				</li>
				<li class="nav-relative">
					<a href="">商品分类</a>
				</li>
				<li class="nav-relative">
					<a href="">免费开店</a>
					<span class="iconfont icon-xiajiantou"></span>
					<div class="down-list">
						<ul>
							<li>
								<a href="">天猫开店</a>
							</li>
						</ul>
					</div>
				</li>
				<li class="nav-relative">
					<a href="">千牛卖家中心</a>
					<span class="iconfont icon-xiajiantou"></span>
					<div class="down-list">
						<ul>
							<li>
								<a href="">开店入驻</a>
							</li>
							<li>
								<a href="">已卖出的宝贝</a>
							</li>
							<li>
								<a href="">出售中的宝贝</a>
							</li>
							<li>
								<a href="">卖家服务市场</a>
							</li>
						</ul>
					</div>
				</li>
				<li class="nav-relative">
					<a href="">帮助中心</a>
					<span class="iconfont icon-xiajiantou"></span>
					<div class="down-list">
							<ul>
								<li>
									<a href="">官方客服</a>
								</li>
								<li>
									<a href="">商家客服</a>
								</li>
								<li>
									<a href="">消息中心</a>
								</li>
								<li>
									<a href="">意见反馈</a>
								</li>
							</ul>
						</div>
					</li>
				</li>
			</ul>
		</div>
		<!-- 广告 -->
		<div class='ad'>
			<a href="">
				<img src="./img/ad.png" alt="" />
			</a>
		</div>
		<!-- 搜索 -->
		<div class='bigbox'>
			<div class='search-box'>
				<a href="" class='s-logo'>
					<img src="./img/logo.png" alt="" />
				</a>
				<div class='s-input'>
					<div class='input-box'>
						<select>
							<option value="">宝贝</option>
							<option value="">天猫</option>
							<option value="">店铺</option>
						</select>
						<input type="text" />
						<button>搜索</button>
					</div>
					<div class='input-link'>
						<a href="">服饰清仓不只5折</a>
						<a href="">抽iPhone </a>
						<a href="">去班味 </a>
						<a href="">男士游泳裤</a>
						<a href="">儿童游泳衣 </a>
						<a href="">拉丁舞服装 </a>
						<a href="">秋冬新款女装 </a>
						<a href="">迪卡依旗舰店</a>
						<a href="">女士胸罩 </a>
						<a href="">秋冬加厚卫衣</a>
					</div>
				</div>
				<a href="" class='s-ad'>
					<img src="./img/ad.gif" alt="" />
				</a>
			</div>
		</div>
		<!-- 标题 -->
		<div class='title-list bigbox'>
			<ul>
				<li>
					<a href="" style='color:orangered;'>天猫</a>
				</li>
				<li>
					<img src="./img/tbzb.gif" alt="" />
					<a href="" style='color:orangered;'>淘宝直播</a>
				</li>
				<li>
					<img src="./img/tbqyg.png" alt="" />
					<a href="" style='color:orangered;'>淘宝企业购</a>
				</li>
				<li>
					<a href="" style='color:orangered;'>司法拍卖</a>
				</li>
				<li>
					<a href="" style='color:limegreen;'>天猫超市</a>
				</li>
				<li>
					<img src="./img/xyjs.gif" alt="" />
					<a href="">闲鱼集市</a>
				</li>
				<li>
					<a href="">天猫国际</a>
				</li>
			</ul>
		</div>
		<!-- 功能面板 -->
		<div class='bigbox'>
			<div class='fun-card'>
				<div class='c-left card'>
					<!-- 标题 -->
					<div class='card-title'>
						<div class='title-left'>
							<span>分类</span>
							<img src="./img/fenlei.gif" alt="" />
						</div>
					</div>
					<!-- 内容 -->
					<ul class="ser-nav">
						<li>
							<div class="nav-menu">
								<span class="iconfont icon-diannao_o"></span>
								<a href="">电脑</a>
								<span>/</span>
								<a href="">配件</a>
								<span>/</span>
								<a href="">办公</a>
								<span>/</span>
								<a href="">文具</a>
							</div>
						</li>
						<li>
							<div class="nav-menu">
								<span class="iconfont icon-gongyepin"></span>
								<a href="">工业品</a>
								<span>/</span>
								<a href="">商业</a>
								<span>/</span>
								<a href="">农业</a>
								<span>/</span>
								<a href="">定制</a>
							</div>
						</li>
						<li>
							<div class="nav-menu">
								<span class="iconfont icon-shouji"></span>
								<a href="">家电</a>
								<span>/</span>
								<a href="">手机</a>
								<span>/</span>
								<a href="">通信</a>
								<span>/</span>
								<a href="">数码</a>
							</div>
						</li>
						<li>
							<div class="nav-menu">
								<span class="iconfont icon-jiaju-"></span>
								<a href="">家具</a>
								<span>/</span>
								<a href="">家装</a>
								<span>/</span>
								<a href="">家居</a>
								<span>/</span>
								<a href="">厨具</a>
							</div>
						</li>
						<li>
							<div class="nav-menu">
								<span class="iconfont icon-gouwudai"></span>
								<a href="">女装</a>
								<span>/</span>
								<a href="">男装</a>
								<span>/</span>
								<a href="">内衣</a>
								<span>/</span>
								<a href="">配饰</a>
							</div>
						</li>
						<li>
							<div class="nav-menu">
								<span class="iconfont icon-diannao_o"></span>
								<a href="">电脑</a>
								<span>/</span>
								<a href="">配件</a>
								<span>/</span>
								<a href="">办公</a>
								<span>/</span>
								<a href="">文具</a>
							</div>
						</li>
						<li>
							<div class="nav-menu">
								<span class="iconfont icon-gongyepin"></span>
								<a href="">工业品</a>
								<span>/</span>
								<a href="">商业</a>
								<span>/</span>
								<a href="">农业</a>
								<span>/</span>
								<a href="">定制</a>
							</div>
						</li>
						<li>
							<div class="nav-menu">
								<span class="iconfont icon-shouji"></span>
								<a href="">家电</a>
								<span>/</span>
								<a href="">手机</a>
								<span>/</span>
								<a href="">通信</a>
								<span>/</span>
								<a href="">数码</a>
							</div>
						</li>
						<li>
							<div class="nav-menu">
								<span class="iconfont icon-jiaju-"></span>
								<a href="">家具</a>
								<span>/</span>
								<a href="">家装</a>
								<span>/</span>
								<a href="">家居</a>
								<span>/</span>
								<a href="">厨具</a>
							</div>
						</li>
						<li>
							<div class="nav-menu">
								<span class="iconfont icon-gouwudai"></span>
								<a href="">女装</a>
								<span>/</span>
								<a href="">男装</a>
								<span>/</span>
								<a href="">内衣</a>
								<span>/</span>
								<a href="">配饰</a>
							</div>
						</li>
						<li>
							<div class="nav-menu">
								<span class="iconfont icon-jiaju-"></span>
								<a href="">家具</a>
								<span>/</span>
								<a href="">家装</a>
								<span>/</span>
								<a href="">家居</a>
								<span>/</span>
								<a href="">厨具</a>
							</div>
						</li>
					</ul>
				</div>
				<div class='c-mid'>
					<div class='mid-big'>
						<div class='big1 card'>
							<img src="./img/banner.png" alt="" />
						</div>
						<div class='big2 card'>
							<div class='card-title'>
								<div class='title-left'>
									<span>百亿补贴 · 买贵必赔</span>
									<img src="./img/bybt.png" alt="" />
								</div>
								<div class='title-right'>
									<span>></span>
								</div>
							</div>
							<div id="big2-con" class="big2-con">
								<ul>
									<li>
										<a href="">
											<img src="./img/big2手机.png" alt="" />
											<p class="con-price">￥17999</p>
											<p class="con-title">火爆热卖中</p>
										</a>
									</li>
									<li>
										<a href="">
											<img src="./img/big2-座椅.png" alt="" />
											<p class="con-price">￥9999</p>
											<p class="con-title">火爆热卖中</p>
										</a>
									</li>
									<li>
										<a href="">
											<img src="./img/big2-机器人.png" alt="" />
											<p class="con-price">￥9899</p>
											<p class="con-title">火爆热卖中</p>
										</a>
									</li>
									<li>
										<a href="">
											<img src="./img/big2-sofa.png" alt="" />
											<p class="con-price">￥22999</p>
											<p class="con-title">火爆热卖中</p>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class='mid-sm'>
						<div class='sm1 card'>
							<div class='card-title'>
								<div class='title-left'>
									<span>淘江湖</span>
									<img src="./img/人气热贴.png" alt="" />
								</div>
								<div class='title-right'>
									<span>></span>
								</div>
							</div>
							<div class="sm1-z">
								<ul>
									<li>
										<a href="">2024年度“梗王”争夺赛，谁能笑傲江湖</a>
									</li>
									<li>
										<a href="">淘江湖“琅琊榜” 谁是你心目中的封神作者？</a>
									</li>
									<li>
										<a href="">打造高效工作空间，寻找你的职场加分神器</a>
									</li>
									<li>
										<a href="">徒步鞋选对，户外环境全hold住</a>
									</li>
									<li>
										<a href="">江西寻乌:以“橙”为媒 点亮乡村振兴路</a>
									</li>
								</ul>
							</div>
						</div>
						<div class='sm2 card'>
							<div class='card-title'>
								<div class='title-left'>
									<span>淘宝直播</span>
									<img src="./img/tbzb.png" alt="" />
								</div>
								<div class='title-right'>
									<span>></span>
								</div>
							</div>
							<div id="sm2-con">
								<ul>
									<li class="sm2-l1">
										<img src="./img/tbzb.gif" alt="" />
										<p>联想官方旗舰</p>
									</li>
									<li class="sm2-l2">
										<img src="./img/tbzb.gif" alt="" />
										<p>蚕花娘娘品牌</p>
									</li>
								</ul>
							</div>
						</div>
						<div class='sm3 card'>
							<div class='card-title'>
								<div class='title-left'>
									<span>淘工厂</span>
									<img src="./img/tgc.png" alt="" />
								</div>
								<div class='title-right'>
									<span>></span>
								</div>
							</div>
							<div id="sm3-con">
								<li>
									<a href="">
										<img src="./img/sm3-吹风机.png" alt=" alt="" />
										<p class="con-price">￥239.9</p>
										<p class="con-title">火爆热卖中</p>
									</a>
								</li>
								<li>
									<a href="">
										<img src="./img/sm3-被子.jpg" alt="" />
										<p class="con-price">￥179</p>
										<p class="con-title">火爆热卖中</p>
									</a>
								</li>
							</div>
						</div>
						<div class='sm4 card'>
							<div class='card-title'>
								<div class='title-left'>
									<span>淘宝秒杀</span>
								</div>
								<div class='title-right'>
									<span>></span>
								</div>
							</div>
							<div id="sm4-con">
								<li>
									<a href="">
										<img src="./img/sm4-金条.png" alt=""/>
										<p class="con-price">￥6210</p>
										<p class="con-title">火爆热卖中</p>
									</a>
								</li>
								<li>
									<a href="">
										<img src="./img/sm4-电车.png" alt="" />
										<p class="con-price">￥5299</p>
										<p class="con-title">火爆热卖中</p>
									</a>
								</li>
							</div>
						</div>
					</div>
				</div>
				<div class='c-right card'>
					<div class="login-top">
						<img src="./img/gg小人.png" style="width: 50px;"/>
						<div class="login-hello">
							<h4>下午好</h4>
							<p>
								<a href=""> 注册 </a>
								<span> | </span>
								<a href=""> 开店 </a>
							</p>
						</div>
					</div>
					<div class="login-z">
						<h4>登录淘宝后更多精彩</h4>
						<h6>嘿！更懂你的推荐，更便捷的搜索</h6>
					</div>
					<div style="text-align: center;">
						<button id="ljdl">立即登录</button>
					</div>
					<table cellpadding="0" cellspacing="0">
						<tr>
							<td>
								<p><span class="iconfont icon-shoucang1""></span></p>
								<p>宝贝收藏</p>
							</td>
							<td><p><span class="iconfont icon-gouwudai"></span></p>
								<p>买过的店</p>
							</td>
							<td>
								<p><span class="iconfont icon-dianpu"></span></p>
								<p>收藏的店</p>
							</td>
							<td>
								<p><span class="iconfont icon-zuji"></span></p>
								<p>我的足迹</p>
							</td>
						</tr>
						<tr>
							<td>
								<img src="img/table-1.png" alt="" />
								<p>云养熊猫</p>
							</td>
							<td>
								<img src="img/td-1688.png" alt="" />
								<p>1688</p>
							</td>
							<td>
								<img src="img/td-gd.png" alt="" />
								<p>高德打车</p>
							</td>
							<td>
								<img src="img/td-my.png" alt="" />
								<p>摸鱼神器</p>
							</td>
						</tr>
						<tr>
							<td>
								<img src="img/td-ty.png" alt="" />
								<p>通义AI</p>
							</td>
							<td>
								<img src="img/td-fz.png" alt="" />
								<p>飞猪旅行</p>
							</td>
							<td>
								<img src="img/td-al.png" alt="" />
								<p>阿里资产</p>
							</td>
							<td>
								<img src="img/td-zd.png" alt="" />
								<p>造点新货</p>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<!-- 商品列表 -->
		<div class="bigbox">
			<div class="shop-tab">
				<ul>
					<li class="activeTab">
						<img src="./img/tab-xh.png" alt="" />
						<span>猜你喜欢</span>
					</li>
					<li>
						<img src="./img/tab-hw.png" alt="" />
						<span>运动户外</span>
					</li>
					<li>
						<img src="./img/tab-ls.png" alt="" />
						<span>馋嘴零食</span>
					</li>
					<li>
						<img src="./img/tab-sm.png" alt="" />
						<span>潮电数码</span>
					</li>
					<li>
						<img src="./img/tab-fs.png" alt="" />
						<span>服饰时尚</span>
					</li>
					<li>
						<img src="./img/tab-jj.png" alt="" />
						<span>家居日用</span>
					</li>
					<li>
						<img src="./img/tab-gh.png" alt="" />
						<span>个护家清</span>
					</li>
				</ul>
			</div>
			<div class="shop-list">
				<ul>
					<li>
						<img src="./img/shop-mq.jpg" alt="" />
						<div class="list-title">卡式炉气罐户外便携式喷火枪小丁烷卡磁瓦斯气瓶燃气罐气瓶通用</div>
						<div class="list-desc">
							<span>
								跨店每300减30
							</span>
							<span>
								退货宝
							</span>
						</div>
						<div class="list-price">
							￥<span>8.9</span>
						</div>
					</li>
					<li>
						<img src="./img/shop-jmj.jpg" alt="" />
						<div class="list-title">会员精选一次性压缩毛巾小方巾20粒装</div>
						<div class="list-desc">
							<span>
								包邮
							</span>
						</div>
						<div class="list-price">
							￥<span>16.9</span>
						</div>
					</li>
					<li>
						<img src="./img/sho-ljt.jpg" alt="" />
						<div class="list-title">简约ins新款垃圾桶摇盖家用卫生间卧室客厅高颜值奶油风纸篓带盖</div>
						<div class="list-desc">
							<span>
								跨店每300减30
							</span>
						</div>
						<div class="list-price">
							￥<span>10.9</span>
						</div>
					</li>
					<li>
						<img src="./img/shop-ss.jpg" alt="" />
						<div class="list-title">洗手盆漏水塞子陶瓷面盆下水器防臭弹跳芯按压式脸池洗脸盆配件</div>
						<div class="list-desc">
							<span>
								包邮
							</span>
						</div>
						<div class="list-price">
							￥<span>9.8</span>
						</div>
					</li>
					<li>
						<img src="./img/shop-mt.jpg" alt="" />
						<div class="list-title">马桶配件进水阀通用排水阀抽水出水阀上水器老式坐便器冲水箱配件</div>
						<div class="list-desc">
							<span>
								包邮
							</span>
						</div>
						<div class="list-price">
							￥<span>9.8</span>
						</div>
					</li>
					<li>
						<img src="./img/shop-gg.jpg" alt="" />
						<div class="list-title">吸盘挂钩强力真空粘胶浴室卫生间墙免打孔毛巾粘钩子承重厨房挂勾</div>
						<div class="list-desc">
							<span>
								跨店每300减30
							</span>
							<span>
								退货宝
							</span>
						</div>
						<div class="list-price">
							￥<span>10.9</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 客服 -->
		<div class="service-box">
			<ul>
				<li>
					<p><span class="iconfont icon-chajian1 "></span></p>
					<p>官方插件</p>
				</li>
				<li>
					<p><span class="iconfont icon-xiaoxi "></span></p>
					<p>消息</p>
				</li>
				<li>
					<p><span class="iconfont icon-gouwuche "></span></p>
					<p>购物车</p>
				</li>
				<li>
					<p><span class="iconfont icon-kefu "></span></p>
					<p>官方客服</p>
				</li>
				<li>
					<p><span class="iconfont icon-fankuiyijianfankui-xianxing "></span></p>
					<p>反馈</p>
				</li>
				<li>
					<p><span class="iconfont icon-fanhuidingbu "></span></p>
					<p>回顶部</p>
				</li>
			</ul>
		</div>
		<!-- 底部广告 -->
		<div>
			<div class="dbgg">
				<img src="./img/gg小人.png" alt="" />
				<img src="./img/gg字.png" alt="" />
				<button class="dbgg-dl">
					<h3>立即登录</h3>
				</button>
				<img id="dbgg-gb" src="./img/gg关闭.png" alt="" />
			</div>
		</div>
		<br /><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</body>
</html>
